<!DOCTYPE html>
<html>
<head>
    <title>首页</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="${s.base}/mobile/base/css/jquery-weui.css">
    <link rel="stylesheet" href="${s.base}/mobile/base/css/base.css?123456">
    <link rel="stylesheet" href="${s.base}/mobile/base/css/component.css?123456">
    <link rel="stylesheet" href="${s.base}/mobile/base/css/index.css?123456">
</head>
<body>
<div id="xyg-comp-page">
<!--轮播图带搜索框-->
<div class="xyg-comp-banner1">
    <!--banner图开始-->
    <#if webBannerList??&&(webBannerList?size gt 0)>
    <div class="xyg-comp-banner swiper-container">
        <div class="swiper-wrapper">
            <#list webBannerList as webBanner>
                <#if webBanner.url?? && webBanner.url != null>
                    <div onclick="goItemPage('${memberId}','${webBanner.url}')" class="swiper-slide"><img src="${webBanner.image}" /></div>
                    <#else>
                        <div class="swiper-slide"><img src="${webBanner.image}" /></div>
                </#if>

            </#list>
        </div>
    </div>
    <#else>
    <div class="xyg-comp-banner swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="${s.base}/mobile/base/images/temp/banner_1.png" /></div>
        </div>
    </div>
    </#if>
    <div class="xyg-comp-citySearch">
        <div class="xyg-comp-citySearch-city font-base1-size border-right1" id="cityBtn">
            <div class="city-name-show font-grade-one">
            <span id="cityShow" data-id="${currentCity.id}">${currentCity.name}</span>
            </div>
            <div class="city-name-icon">
                <span><svg class="icon1" aria-hidden="true"><use xlink:href="#iconsanjiaoxing"></use></svg></span>
            </div>
            <div class="clearBoth"></div>
        </div>
        <div class="xyg-comp-citySearch-search">
            <input type="text" id="name" class="xyg-comp-input-noborder font-base1-size" placeholder="从这里搜索楼盘、拿佣金"/>
        </div>
        <div class="xyg-comp-citySearch-btn" id="searchItem">
            <img src="${s.base}/mobile/base/images/icon_search.png"/>
        </div>
        <div class="clearBoth"></div>
    </div>
</div>
<!--轮播图带搜索框-->
<!--消息-->
<!--<#if webArticle??>
<div class="xyg-comp-notice2">
    <div class="xyg-comp-notice2-img border-right1">
        <img src="${s.base}/mobile/base/images/icon_xb.png"/>
    </div>
    <div class="xyg-comp-notice2-content">
        <div class="xyg-comp-notice2-content-title font-base1-size font-grade-one">
            ${webArticle.title}
        </div>
        <div class="xyg-comp-notice2-content-time font-base2-size">
            <#if webArticle.createTime??>${webArticle.createTime?string('yyyy-MM-dd hh:mm:ss')}</#if>
        </div>
    </div>
    <div class="clearBoth"></div>
</div>
</#if>-->
<!--消息-->
<!--<div style="width:100%; height:20px; background:#f8f8f8;"></div>-->
<!--热卖楼盘-->
<!--<#if hotWebBanner??>
<div class="xyg-comp-title1 font-base3-size-bold">
    热卖楼盘
</div>
<#if hotWebBanner.url?? && hotWebBanner.url!="">
<div class="xyg-comp-pic1" onClick="goJump('${hotWebBanner.url}','${memberId}')">
    <img src="${hotWebBanner.image}"/>
</div>
<#else>
<div class="xyg-comp-pic1">
    <img src="${hotWebBanner.image}"/>
</div>
</#if>
</#if>-->

<!--热卖楼盘-->
<!--热点楼盘-->
<div class="xyg-comp-title1 font-base3-size-bold">
    热点楼盘
</div>

<!--楼盘分类-->
<div class="xyg-comp-lie5">
    <div class="xyg-comp-item" data-id="" onclick="changeHostType(this)">
        <!--<img src="${s.base}/mobile/base/images/temp/show_2.png"/>-->
        <div class="xyg-comp-item-title font-base4-size-bold select">全部</div>
    </div>
    <#list hostTypeList as hostType>
        <div class="xyg-comp-item" data-id="${hostType.id}" onclick="changeHostType(this)">
            <!--<img src="${hostType.image}"/>-->
            <div class="xyg-comp-item-title font-base4-size-bold">${hostType.name}</div>
        </div>
    </#list>

    <div class="clearBoth"></div>
</div>
<!--内容开始-->
<div class="xyg-comp-content1">

</div>
<!--热点楼盘-->

<!--底部菜单开始-->
<div style="width:100%; height:98px;"></div>
<div class="xyg-comp-bottom3">
    <div class="xyg-comp-bottom-item">
        <a href="javascript:goFistPage('${memberId}')">
            <img src="${s.base}/mobile/base/images/icon_menu_1_a.png"/>
            <div class="xyg-comp-bottom-item-text select-text">首页</div>
        </a>
    </div>
    <div class="xyg-comp-bottom-item">
        <a href="javascript:goAllCustomerEditPage('${memberId}')">
            <img src="${s.base}/mobile/base/images/icon_menu_2.png"/>
            <div class="xyg-comp-bottom-item-text">推荐</div>
        </a>
    </div>
    <div class="xyg-comp-bottom-item">
        <a href="javascript:goMyPage('${memberId}')">
            <img src="${s.base}/mobile/base/images/icon_menu_3.png"/>
            <div class="xyg-comp-bottom-item-text">我的</div>
        </a>
    </div>
    <div class="clearBoth"></div>
</div>
</div>
<!--底部菜单结束-->
<!--城市选开始择-->
<div id="citySelect" style="display:none" class="xyg-comp-select">
    <div id="showLetter" class="showLetter"><span>A</span></div>
    <div class="letter">
        <ul>
            <li><a href="javascript:;">热门</a></li>
            <li><a href="javascript:;">历史</a></li>
        </ul>
    </div>
    <!--城市列表-->
    <div class="container-city">
        <div class="city">

        </div>
    </div>
</div>
<!--城市选择结束-->
</body>
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script src="${s.base}/mobile/base/js/jquery-2.1.4.js"></script>
<script src="${s.base}/mobile/base/js/jquery-weui.js"></script>
<script type="text/javascript" src="${s.base}/mobile/base/js/zepto.js"></script>
<script type="text/javascript" src="${s.base}/mobile/base/js/city.js"></script>
<script src="${s.base}/mobile/base/js/swiper.js"></script>
<script src="${s.base}/mobile/base/fonts/iconfont.js"></script>
<script src="${s.base}/mobile/base/js/component.js"></script>
<script src="${s.base}/mobile/base/js/base.js?123456789000"></script>
<script type="text/javascript">
    initXygDpi();
    var memberId='${memberId}';
    var cityId = '${currentCity.id}';
    var currentHostTypeId = '';
    var name = '';
    var pageNum = 0;
    var pageSize = 5;
    var loading = false;  //状态标记

    $(document).ready(function(e) {
        $.fn.initXygCompBanner("",".xyg-comp-banner-swiper1",417);
        if (loading) return;
        loading = true;
        sendPost();

        // 通过ajax查询城市
        // $.ajaxSettings.async = false;
        $.get('/weChat/citySelect', {}, function (res) {
            if (res.code == 0) {
                initSelectData("citySelect","cacheCity",res.data.hotCitySelect,res.data.citySelect,rightLetter,"热门城市",function(id,name){
                    $("#xyg-comp-page").show();
                    $("#citySelect").hide();
                    // alert(id+";"+name);
                    // 切换城市
                    goFistPage(memberId, id);
                });
            }
        });
        // $.ajaxSettings.async = true;

        $("#cityBtn").bind("click",function(){
            $("#xyg-comp-page").hide();
            $("#citySelect").show();
        });
    });

    function changeHostType(obj) {
        var id = $(obj).attr("data-id");
        $(".xyg-comp-lie5 .xyg-comp-item .xyg-comp-item-title").removeClass("select");
        $(obj).find(".xyg-comp-item-title").addClass("select");
        currentHostTypeId=id;
        pageNum = 0;
        $(".xyg-comp-content1").html("");
        sendPost();
    }

    $("#searchItem").on("click",function () {
        name = $("#name").val();
        pageNum = 0;
        $(".xyg-comp-content1").html("");
        sendPost();
    });

    function sendPost() {
        pageNum++;
        $.fn.postMethodAll("/weChat/hostItem/page",{'pageNum':pageNum,'pageSize':pageSize,'hostType':currentHostTypeId,'cityId':cityId,'name':name},function (result) {
            if (result.data != null && result.data.length > 0) {
                result.data.forEach(function (item,key,mapObj) {
                    // item就是信息
                    var watchStr='';
                    var hostWatchList = item.hostWatchList;
                    if(hostWatchList != null && hostWatchList.length > 0) {
                        watchStr+='<div class="xyg-comp-item-wg color1 font-base5-size" >\
                            <div class="xyg-comp-item-wg-num color5 font-base5-size">'+item.hostWatchNum+'人围观&nbsp;&nbsp;</div>\
                        <div class="xyg-comp-item-wg-user">';
                        for (var i = hostWatchList.length - 1; i >= 0; --i) {
                            var right = (i+1)*30;
                            var head=hostWatchList[i].memberHeadImage;
                            if(head==null||head==""){
                                head="/image/avatar_default.jpg";
                            }
                            watchStr+='<img src="'+head+'" style="right:'+right+'px;"/>';
                        }
                        watchStr+='<img src="${s.base}/mobile/base/images/icon_dian.png" class="dian"/></div>\
                            </div>';
                    }
                    var allPriceStr = "暂无";
                    if (item.allPrice != null && item.allPrice != "") {
                        allPriceStr=item.allPrice+"万";
                    }
                    var str='<div class="xyg-comp-item borderBottom" onclick="goItemPage(\''+memberId+'\',\''+item.id+'\')">\
                        <div class="xyg-comp-item-left">\
                        <div class="xyg-comp-item-img">\
                        <div class="xyg-comp-item-img-title font-base5-size color2">'+item.areaName+'</div>\
                        <img src="'+item.coverImage+'"/>\
                        </div>\
                        <div class="xyg-comp-item-share color1 font-base5-size">\
                        <span><svg class="icon2" aria-hidden="true"><use xlink:href="#iconfenxiang"></use></svg></span>&nbsp;&nbsp;'+item.shareNumber+'人分享\
                    </div>\
                    </div>\
                    <div class="xyg-comp-item-right">\
                        <div class="xyg-comp-item-name font-base4-size color3">'+item.name+'</div>\
                        <div class="xyg-comp-item-param font-base1-size color1">'+item.minRooms+'-'+item.maxRooms+'室&nbsp;|&nbsp;'+item.minApartmentArea+'-'+item.maxApartmentArea+'m&sup2;\
                    <div class="font-base4-size-bold floatR color4">'+allPriceStr+'</div>\
                    </div>\
                    <div class="xyg-comp-item-tag">';
                    if(item.tag!=null&&item.tag!=""&&item.tag!="null"){
                        var tags=item.tag.split(",");
                        for(var i=0;i<tags.length;i++){
                            str+='<div class="xyg-comp-item-tag-title">'+tags[i]+'</div>';
                        }
                    }
                    str+='<div class="clearBoth"></div>\
                        </div>\
                        <div class="xyg-comp-item-price font-base1-size color1">\
                        均价<span class="font-base3-size-bold color4">'+item.price+'</span>元/m&sup2;\
                    </div>'+watchStr+'</div>\
                        <div class="clearBoth"></div>\
                        </div>';
                    $(".xyg-comp-content1").append(str);
                });
                loading = false;
                if (!result.hasNextPage) {
                    $(document.body).destroyInfinite();
                }
            } else {
                $(document.body).destroyInfinite();
            }
            if(result.count<=0){
                $(".xyg-comp-content1").html('<div style="width: 100%; height: auto; line-height: 50px; text-align: center; margin-top: 150px; color: #0A0A0A; font-size: 32px;">'+
                    '<img src="${s.base}/mobile/base/images/no.png" style="width: 350px; height: auto; margin: 10px auto;"/>'+
                    '暂无数据</div>');
            }
        });
    }

</script>

</html>

